<template>
  <div class="withdrawal-page">
    <div class="note-btn" @click="goToNote">
      <van-icon name="notes-o" />
      {{ t("withdrawal_note") }}
    </div>

    <div class="withdrawal-form">
      <div class="balance-info">
        <div class="icon"></div>
        <div class="amount">{{ formatNumber(userInfo.yuusable) }}</div>
        <div class="label">{{ t("withdrawal_balanceLabel") }}(COP)</div>
      </div>
      <div class="input-field">
        <input
          type="text"
          v-model="amount"
          :placeholder="t('withdrawal_amountPlaceholder')"
        />
      </div>

      <div class="bank-info">
        <div class="title">{{ t("withdrawal_bankTitle") }}</div>
        <div class="info-list">
          <div class="info-item">
            <div class="label">
              {{ t("userbank_name") }} <span>{{ bankInfo.userNmae }}</span>
            </div>
            <div class="border-bottom"></div>
          </div>
          <div class="info-item">
            <div class="label">
              {{ t("profile_bank") }} <span>{{ bankInfo.bankCard }}</span>
            </div>
            <div class="border-bottom"></div>
          </div>
          <div class="info-item">
            <div class="label">
              {{ t("userbank_account") }}<span>{{ bankInfo.khyh }}</span>
            </div>
            <div class="border-bottom"></div>
          </div>
          <div class="info-item">
            <div class="label">
              {{ t("sfz") }}<span>{{ bankInfo.idCard }}</span>
            </div>
            <div class="border-bottom"></div>
          </div>
        </div>
        <div class="bank-link" @click="editBankInfo">
          <van-icon name="edit" />
          <span>{{ t("withdrawal_editBank") }}</span>
        </div>
      </div>

      <button class="submit-btn" @click="submitWithdrawal">
        {{ t("user-withdrawal") }}
      </button>

      <div class="tips-section">
        <div class="tips-title">Tips</div>
        <div class="tips-content">
          <div class="tip-item">
            1.{{ t("withdrawal_minTip") }}
            COP <span class="highlight">{{getMoneyTip()}}</span> 
          </div>
          <div class="tip-item">
            2.{{ t("withdrawal_timeTip") }}
          </div>
          <div class="tip-item">3.{{ t("withdrawal_feeTip") }} {{ ((parseFloat(inviteInfo.outGas || '0') * 100).toFixed(2)) }}%</div>

    
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { addWithdrawal, getUserBankInfo, withdrawalTips } from "@/api/user";
import { showToast } from "vant";
import { useUserStore } from "@/stores";
import { formatNumber } from "@/utils/public";

const userStore = useUserStore() as any;
const router = useRouter();
const amount = ref("");
const inviteInfo = ref<{ outLow?: string; outHigh?: string; outGas?:string }>({});

const { t } = useI18n();
const bankInfo = ref({
  userNmae: "",
  bankCard: "",
  khyh: "",
  idCard: ""
});
// 用户信息从store中获取
const userInfo = computed(() => userStore.userInfo || {}) as any;
// 获取银行卡信息
const fetchBankInfo = () => {
  getUserBankInfo()
    .then((res: any) => {
      if (res.data) {
        bankInfo.value = res.data;
      }
    })
    .catch((err) => {
      console.error("err", err);
    });
};

const editBankInfo = () => {
  router.push("/user/bank");
};

const goToNote = () => {
  router.push("/console/withdrawalrecord");
};

onMounted(() => {
  // 获取银行卡信息
  fetchBankInfo();
  getwithdrawalTips()
});

// 提现金额
const getMoneyTip = () => {
  const outLow = formatNumber(parseFloat(inviteInfo.value.outLow || '0'));
  const outHigh = formatNumber(parseFloat(inviteInfo.value.outHigh || '0'));
  return `${outLow}~${outHigh}`;
};

const getwithdrawalTips = async () => {
  try {
    const res = await withdrawalTips()
    if (res.code === 200) {
      inviteInfo.value = res.data
    } else {
      showToast(res.msg || t('user-coupon_noData'))
    }
  } catch (e) {
    showToast(t('products_networkError'))
  } finally {
  }
}

// 提交提现申请
const submitWithdrawal = () => {
  if (!amount.value) {
    showToast(t('withdrawal_amountRequired'));
    return;
  }

  addWithdrawal({ amount: amount.value })
    .then((res: any) => {
      showToast(res.msg || t('withdrawal_success'));
      amount.value = "";
      userStore.info();
    })
    .catch((err) => {
      console.error("err", err);
    });
};
</script>

<style scoped>
.withdrawal-page {
  min-height: 100vh;
  overflow: hidden;
  font-size: 17px;
  color: #f6eade;
  background: url("@/assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 17px;
}

.note-btn {
  position: absolute;
  top: 28px;
  right: 17px;
  color: rgb(246, 234, 222);
  display: flex;
}

.note-btn .van-icon {
  margin-right: 5px;
  font-size: 20px;
}

.balance-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 17px;
}

.balance-info .icon {
  width: 120px;
  height: 120px;
  background-image: url("@/assets/images/iconl1.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.balance-info .amount {
  font-family: San Francisco Display;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5em;
  margin-top: -16px;
  background: linear-gradient(104deg, #f9f3ed 15%, #fad4b7 87%), #ffe6ce;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 9px;
}

.balance-info .label {
  font-size: 17px;
  line-height: 1.2em;
  text-align: center;
  color: #f6eade;
  overflow: hidden;
  margin-bottom: 16px;
}

.withdrawal-form {
  padding: 0 17px 21px;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(254, 242, 230, 0) 10%,
    rgba(254, 237, 221, 0.1) 63%
  );
}

.input-field {
  margin-bottom: 17px;
}

.input-field input {
  display: block;
  width: 100%;
  height: 57px;
  border-radius: 9px;
  background: #242120;
  box-sizing: border-box;
  border: 1px solid #5c5754;
  font-size: 17px;
  color: #fff;
  padding: 0 17px;
}

.input-field input::placeholder {
  color: rgba(246, 234, 222, 0.4);
}

.bank-info {
}

.bank-info .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5em;
  color: #fff;
  overflow: hidden;
  margin-bottom: 9px;
}

.info-list {
  margin-bottom: 11px;
}

.info-item {
  position: relative;
  margin-bottom: 15px;
}
.info-item span {
  display: inline-block;
  float: right;
  color: rgb(246, 234, 222);
  font-size: 12px;
}
.info-item .label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin-bottom: 5px;
}

.info-item .border-bottom {
  height: 0.5px;
  border-bottom: 0.5px dashed rgba(246, 234, 222, 0.5);
}

.bank-link {
  display: flex;
  justify-content: right;
  font-size: 17px;
  margin-top: 17px;
}

.bank-link .van-icon {
  font-size: 20px;
}
.bank-link span {
  margin-left: 4px;
}

.submit-btn {
  overflow: hidden;
  width: 361px;
  height: 50px;
  line-height: 50px;
  border-radius: 13px;
  margin: 25px auto 17px;
  background:
    linear-gradient(270deg, #fee5cf, #dfb695 50%, #fee5cf),
    linear-gradient(180deg, #af917f 2%, #a9836b 99%);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  color: #0c1f26;
}

.tips-section {
  position: relative;
  border-radius: 11px;
  padding: 9px 11px;
  background: linear-gradient(
    90deg,
    rgba(254, 229, 207, 0),
    rgba(223, 182, 149, 0.2) 99%
  );
}

.tips-title {
  font-size: 17px;
  line-height: 1.2em;
  font-weight: 700;
  background: linear-gradient(129deg, #f9f3ed 10%, #fad4b7 91%), #ffe6ce;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 4px;
}

.tip-item {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5em;
  overflow: hidden;
  color: rgba(246, 234, 222, 0.4);
}

.tip-item .highlight {
  font-weight: 700;
  color: #f6eade;
  padding: 0 4px;
}

.fee-table {
  border: 0.5px solid rgba(246, 234, 222, 0.6);
  border-radius: 5px;
  padding: 4px;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(246, 234, 222, 0.4);
}

.fee-header {
  align-items: center;
  justify-content: space-between;
  display: flex;
  margin-bottom: 4px;
}
.fee-header .range {
  flex: 50%;
}
.fee-header .fee {
  flex: 50%;
}

.fee-content {
}

.fee-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.fee-row .range {
  flex: 50%;
}

.fee-row .fee {
  flex: 50%;
}
</style>
